<template>
      <div class="main">
        <div class="df aic" style="justify-content: space-between">
          <p class="main_text">信息上传(商务部)</p>
          <el-button type="primary"  @click="openWeb">跳转商务部</el-button>
        </div>
      <div class="content">
        <el-collapse v-model="activeName" >
          <p class="tac" style="font-weight: bold;font-size:18px;margin: 10px 0;">商务部系统快速导入车辆数据插件工具使用方法</p>
          <el-collapse-item title="一.安装插件" name="1">
            <div >
              1.将压缩包解压至电脑
            </div>
            <div>
              2.edge浏览器地址栏输入edge://extensions/   谷歌浏览器输入chrome://extensions/ 其余浏览器可通过右上角...进入如图拓展管理页面
            </div>
            <div  class="tac">
              <el-image style="width: 50%; height: 50%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/lrpoh1.png?Expires=2049779336&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=ZVi1Zd1XvlnDLmBzMtNtlT9VyM0%3D"  />
            </div>
            <div>
              3.打开如上图开发人员模式，出现“加载解压缩的拓展”选项，点击选中解压后文件夹中的dist文件，注意不是解压后的文件。也可将dist文件拖动至上页面，直至出现下图，并将右上角拓展展示打开
              <p style="margin-left: 10px">注：操作完成之后请勿移动dist文件夹路径或重命名，如需移动则需重新按以上操作配置。如下图服务工作进程不工作，可点击重新加载或重新按以上操作配置</p>
            </div>
            <div  class="tac">
              <el-image style="width: 50%; height: 50%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/thdnk2.png?Expires=2049779336&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=31zScwHUt2%2BZ%2FGoZ0noa9l2c%2B3o%3D" />
            </div>
          </el-collapse-item>
          <el-collapse-item title="二.补全资料" name="2">
            <div>
              从erp小程序录入车辆后，存在两种补全资料的方式
            </div>
            <div>
             1.erp小程序可进入“车辆录入-已录入”中或使用“扫码拆解”扫描车辆录入时打印的二维码，均可进入补充资料页面。
            </div>
            <div>
              2.打开劣车宝服务后台，导航栏中选择办证大厅-资料下载。这里可以修改或补充需要上传商务部的信息。
              <p style="margin-left: 10px">注：两种方式在任何一处补充，数据都会完全同步。小程序补充的资料可用于车辆结算，配件上商城，上传商务部。而后台资料补充则主要针对上传商务部所需资料。</p>
            </div>
            <div class="tac">
              <el-image style="width: 30%;height: 30%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/kvphx3.png?Expires=2049779722&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=zY4eVfaROuEXONl%2Fcdb9St3NLpI%3D" />
              <el-image style="width: 30%;height: 30%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/fcoij4.png?Expires=2049779722&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=ftCZKxlSyIHRHwwUSvudMuUShqc%3D" />
            </div>
            <div  class="tac">
              <el-image style="width: 100%;height:100%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/vogxl5.png?Expires=2049779722&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=TiM4aoVs%2FoRav7y8pLuvwCbHKZs%3D"></el-image>
            </div>
          </el-collapse-item>
          <el-collapse-item title="三.资料导入" name="3">
            <div>
              点击此页面右上角“跳转商务部”跳转至商务部业务系统统一平台。在右下角弹出如下提示之后表示首次获取车辆信息成功。
            </div>
            <div>
              <p style="margin-left: 10px">注：只有在跳转商务部网站弹出如下提示之后才可看到车辆信息，之后即使关闭商务部标签页也可查看并资料是及时更新的。但如果退出登录之后，则需重新进入商务部网站获取Token</p>
            </div>
            <div class="tac">
              <el-image style="width: 30%;height: 30%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/bsowu1309AF34-CE76-40b9-83FE-08D383A8E7F7.png?Expires=2049783692&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=%2BNtPN8tRW1BkKv6KdUx0dfdOFW8%3D" />
            </div>
            <div>
              获取完成车辆信息，登录商务部账号之后即可选择车辆导入。
            </div>
            <div class="tac">
            <el-image style="width: 30%;height: 30%" src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/izcgh7.png?Expires=2049779986&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=qXe2SOAUJ9uR0cdXhqwBWdHS430%3D" />
            </div>
            <div>如有任何疑问，请联系劣车宝官方客服</div>
          </el-collapse-item>
        </el-collapse>
      </div>
      </div>
 </template>

  <script setup lang="ts">
  import { ref } from "vue"
  const activeName = ref('1')
  // import { formatTime } from "@/filters/index";
  // import { ElMessage } from "element-plus";
  // import { Edit, Close } from "@element-plus/icons-vue";
  // const centerDialogVisible = ref<any>(true);
  // const time = ref<any>(3)
  // const timeFun = setInterval(() => {
  //     time.value--;
  //     if (time.value <= 0) {
  //         clearInterval(timeFun);
  //         centerDialogVisible.value = false
  //         location.reload()
  //         window.open('https://ecomp.mofcom.gov.cn/loginCorp.html')
  //     }
  // }, 1000);
  // const openWeb = () => {
  //     window.open('https://ecomp.mofcom.gov.cn/loginCorp.html')
  //     location.reload();
  // }
  const openWeb = () => {
    window.open('https://ecomp.mofcom.gov.cn/loginCorp.html')
    location.reload()

  }
  </script>

  <style scoped lang="scss">
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content{
      height: 100%;
      background-color: white;
      padding:0 10px;
      border-radius: 5px;
      overflow: auto;
      .el-collapse{
        :deep(.el-collapse-item__header ){
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }

  </style>